<template>
  <div>
    <swipe :pics="pics" :isfull="true"></swipe>

    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/newslist">
          <img src="../static/imgs/menu1.png" alt="" />
          <div class="mui-media-body">新闻资讯</div></router-link
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/photo_list">
          <img src="../static/imgs/menu2.png" alt="" />
          <div class="mui-media-body">图片分享</div></router-link
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/goods_list">
          <img src="../static/imgs/menu3.png" alt="" />
          <div class="mui-media-body">商品购买</div></router-link
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../static/imgs/menu4.png" alt="" />
          <div class="mui-media-body">留言反馈</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../static/imgs/menu5.png" alt="" />
          <div class="mui-media-body">视频专区</div></a
        >
      </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
          <img src="../static/imgs/menu6.png" alt="" />
          <div class="mui-media-body">联系我们</div></a
        >
      </li>
    </ul>
  </div>
</template>

<script>
import swipe from "./subcomponents/Swipe.vue";
export default {
  name: "HomeContainer",
  data() {
    return {
      pics: [],
      loading: true,
    };
  },
  components: {
    swipe,
  },
  mounted() {
    this.getLunboList();
  },
  methods: {
    getLunboList() {
      this.axios.get("api/photos").then((response) => {
        if (response.status === 200) {
          this.pics = response.data.slice(-10);
          this.loading = false;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.mui-grid-view.mui-grid-9 {
  background-color: #fff;
  li {
    border: none;
  }
  img {
    width: 32px;
    height: 32px;
  }
}
</style>